<template>
  <!-- 组件根标签 -->
  <div class="searchdata">
    <!-- <h4>搜索关键字数据</h4> -->
    <hmnavbar title="面经搜索" @back="$router.push('/shareList')"></hmnavbar>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="search(value)"
      @cancel="onCancel"
      shape="round"
    />
    <!-- 搜索位置 -->
    <div class="hot" v-if="isShowHot === true">
      <van-cell class="dajia">
        <template #title>
          <h3>大家都在搜索</h3>
        </template>

        <template #label>
          <div class="list">
            <div
              @click="search(item)"
              class="kemu"
              v-for="(item, index) in hotSearchlist"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </van-cell>

      <van-cell class="lishi">
        <template #title>
          <h3>历史记录</h3>
        </template>
        <template #default @click="clear">
          <span @click="clear">清空</span>
        </template>
        <template #label>
          <div class="lishilist">
            <div
              class="lishixiao"
              v-for="(item, index) in historyList"
              :key="index"
              @click="search(item)"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </van-cell>
    </div>

    <!-- 根据关键字现实的数据位置 -->
    <div class="data" v-else>
      <!-- 列表组件的,自带@load事件 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已经到底了~~~"
        @load="onLoad"
        offset="100"
      >
        <shareitem
          @xiangqingshare="$router.push(`/xiangqingshare/${item.id}`)"
          :item="item"
          v-for="(item, index) in searchDateList"
          :key="index"
        ></shareitem
      ></van-list>
    </div>
  </div>
</template>
<script>
import { searchHotdata, getSharedatas } from './../../../api/article'
import shareitem from './../find/shareItem'
import { setToken, getToken, removeToken } from './../../../utils/token'

export default {
  name: '',
  data () {
    return {
      // 双向啊绑定输入框
      value: '',
      // 存储的关键字列表
      hotSearchlist: [],
      // 关键字提示的位置和数据源的位置是互斥的
      isShowHot: true,

      // 关键字返回的分享的数据
      searchDateList: [],
      start: -5,
      limit: 5,
      finished: false,
      loading: false,
      total: 0,

      // 历史记录
      historyList: []
    }
  },
  methods: {
    // 清空历史记录
    clear () {
      this.$dialog
        .confirm({
          title: '',
          message: '确定要清空吗?'
        })
        .then(() => {
          console.log('确定')
          this.historyList = []
          removeToken('history')
        })
        .catch(() => {
          console.log('取消')
        })
    },

    // 点击关键字进行搜索
    search (item) {
      console.log('点击关键字了:', item)
      // 给到输入框的文本位置
      this.value = item

      // 显示数据,更改isShowHot的状态,显示数据源
      this.isShowHot = false

      // 将关键字保存到历史数组的最前面
      this.historyList.unshift(item)
      // 数组去重
      this.historyList = [...new Set(this.historyList)]
      // 数组限长
      this.historyList.splice(5)
      // 将保存了搜索的关键字的数组保存到localStorge中
      setToken('history', JSON.stringify(this.historyList))
    },
    onSearch (val) {
      console.log('点击了手机键盘中的搜索按钮', val)
    },
    onCancel () {
      console.log('取消')
      // 切换显示的数据源和搜索关键字的盒子
      this.isShowHot = true
      // 清空分享列表的数据 -- 初始化data中分享的数据
      this.searchDateList = []
      this.start = -5
      this.limit = 5
      this.finished = false
      this.loading = false
      this.total = 0
    },

    // 列表组件的事件-组件自带的事件 -- 列表显示了,关键字搜索隐藏了
    async onLoad () {
      this.start += this.limit
      // 发送请求热门数据关键字
      const res = await getSharedatas({
        start: this.start,
        limit: this.limit,
        q: this.value
      })
      console.log(res)

      // 遍历返回来的数组中每个数据的title,给里面的关键字替换成红色
      res.data.data.list.forEach(value => {
        value.title = value.title.replace(
          this.value,
          `<span style="color:red">${this.value}</span>`
        )
      })
      // 将每次触发的onLoad 加载的数据,,追加到searchDateList数组中,并不是直接覆盖掉
      // ...res.data.data.list 数组中的数据解构,只拿到数组中的数据
      this.searchDateList.push(...res.data.data.list)
      // 记录数据的总条数
      this.total = res.data.data.total

      // 关闭加载中提示
      this.loading = false
      // 存储数据的数组如果达到了总数据长度的话,就停止整个列表的onload事件
      if (this.searchDateList.length >= this.total) {
        this.finished = true
      }
    }
  },

  components: {
    shareitem
  },

  async created () {
    const res = await searchHotdata()
    // console.log(res)
    this.hotSearchlist = res.data.data

    // 获取历史记录的渲染 -- ||号后面的数组是为了防止数组的unshift方法报错的
    this.historyList = JSON.parse(getToken('history')) || []
  }
}
</script>
<style lang="less" scoped>
.searchdata {
  h3 {
    font-size: 18px;
    font-weight: normal;
  }
  font-size: 12px;
  .dajia {
    padding: 0px 15px;
    margin: 30px 0;
    .list {
      display: flex;
      flex-wrap: wrap;

      .kemu {
        padding: 5px 10px;
        background: #f7f4f5;
        border-radius: 8px;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
  }
  .lishi {
    padding: 0px 15px;
    margin: 30px 0;

    .lishilist {
      display: flex;
      flex-wrap: wrap;
      .lishixiao {
        padding: 5px 10px;
        background: #f7f4f5;
        border-radius: 8px;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
  }
}
</style>
